<template>
  <div>
    <h2 style="margin: 20px">搜索：{{ searchKeyword }}</h2>

    <el-tabs v-model="activeName" class="tabs" @tab-click="toCorrespondPage">
      <el-tab-pane label="歌曲" name="toSong"> </el-tab-pane>
      <el-tab-pane label="视频" name="toMV"> </el-tab-pane>
      <el-tab-pane label="专辑" name="toAlbum"> </el-tab-pane>
      <el-tab-pane label="歌单" name="toSongList"> </el-tab-pane>
      <el-tab-pane label="歌手" name="toSinger"> </el-tab-pane>
    </el-tabs>

    <router-view> </router-view>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { storage } from "../../stores/storage";

import router from "../../router";
export default defineComponent({
  mounted() {
    this.toSong();
  },
  setup() {
    let store = storage();
    const { searchKeyword } = storeToRefs(store);
    const activeName = ref("toSong");
    function toSong() {
      store.setSearchType(1);
      router.push({
        path: "/search/song",
      });
    }
    function toMV() {
      store.setSearchType(1014);
      router.push({
        path: "/search/mv",
      });
    }
    function toAlbum() {
      store.setSearchType(10);
      router.push({
        path: "/search/album",
      });
    }
    function toSinger() {
      store.setSearchType(100);
      router.push({
        path: "/search/singer",
      });
    }
    function toSongList() {
      store.setSearchType(1000);
      router.push({
        path: "/search/songList",
      });
    }
    const toCorrespondPage = (tab, event) => {
      if (tab.paneName === "toSong") toSong();
      else if (tab.paneName === "toMV") toMV();
      else if (tab.paneName === "toAlbum") toAlbum();
      else if (tab.paneName === "toSongList") toSongList();
      else if (tab.paneName === "toSinger") toSinger();
    };
    watch(
      () => searchKeyword.value,
      (v1) => {
        toSong();
        activeName.value = "toSong";
      },
      { deep: true, immediate: true }
    );
    return {
      toSong,
      toMV,
      toAlbum,
      searchKeyword,
      activeName,
      toCorrespondPage,
      toSinger,
      toSongList,
    };
  },
});
</script>

<style scoped>
.tabs {
  width: 300px;
  margin-left: 25px;
}
</style>
